<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页聊天程序</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/client.css">
    <link rel="stylesheet" href="css/goodlooking/bootstrap/bootstrap-icons.css">
    <link rel="stylesheet" href="css/goodlooking/bootstrap/min.css">
    <link rel="stylesheet" href="css/goodlooking/tooplate-kool-form-pack.css">
    <link rel="stylesheet" href="css/input.css">

</head>
<body>
<!--    &lt;!&ndash; 作为遮罩层, 实现背景模糊的效果 &ndash;&gt;-->
<div class="cover"></div>

<!-- 这个 div 作为整个界面的总的容器 -->
<div class="client-container">

    <!--        header-->
    <div class="col-lg-12 col-12 d-flex align-items-center">
        <a href="javascript:void(0);" class="custom-btn custom-border-btn btn" data-bs-toggle="modal" data-bs-target="#subscribeModal">
            加好友
            <i class="bi-arrow-right ms-2"></i>
        </a>

    </div>

    <!--        弹窗  modal.hide();-->
    <div class="modal fade" id="subscribeModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <form action="javascript:void(0);" method="post" class="custom-form mt-lg-4 mt-2" role="form">
                        <h2 class="modal-title" id="subscribeModalLabel">添加朋友</h2>

                        <input type="text" name="email" id="email"  class="form-control" placeholder="her userId" required="">
                        <input type="text" name="email" id="content"  class="form-control" placeholder="打个招呼呗" required="">

                        <button type="submit" id = "submit" class="form-control">append</button>
                    </form>
                </div>

                <div class="modal-footer justify-content-center">
                    <p>Aba Aba, inarticulate in ideation's void</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 中间的聊天区域 -->
    <div class="main">
        <!-- 左侧区域, 显示好友列表和会话列表 -->
        <div class="left">
            <!-- 当前登录用户的用户名 -->
            <div class="user">
            </div>
            <!-- 这是搜索框 -->
            <div class="search">
                <!-- 搜索框中的输入框 -->
                <input type="text" class="search-input">
                <!-- 点击按钮进行搜索 -->
                <button class="search-button"></button>
            </div>
            <!-- 标签页 -->
            <div class="tab">
                <!-- 会话列表标签 -->
                <div class="tab-session">
                </div>
                <!-- 好友列表标签 -->
                <div class="tab-friend"></div>
            </div>
            <!-- 会话列表 -->
            <ul class="list" id="session-list">

            </ul>
            <!-- 好友列表 -->
            <ul class="list hide" id="friend-list">

            </ul>
        </div>

        <!-- 右侧区域, 显示聊天编辑框 -->
        <div class="right">
            <!-- 会话标题 -->
            <div class="title"></div>
<!--            聊天框-->
            <div class="container">
                <div class="chat-container" id="chatContainer">
                    <div class="message bot">
                        <div class="message-content">
                            您好！这是一个优化后的聊天输入框，您可以：
                            <ul style="margin-top: 10px; padding-left: 20px;">
                                <li>在下方输入文本内容</li>
                                <li>粘贴图片或文件（Ctrl+V）</li>
                                <li>拖放文件到输入区域</li>
                                <li>点击📎按钮选择文件</li>
                                <li>按Enter键发送消息和文件</li>
                                <li>输入长文本时使用滚动条查看</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
<!--            输入框-->
            <div class="input-container">
                <div class="toolbar">
                    <div class="toolbar-button" title="表情">😊</div>
                    <div class="toolbar-button" title="图片">🖼️</div>
                    <label for="fileInput" class="toolbar-button" title="附件">📎</label>
                    <input type="file" id="fileInput" multiple class="hidden">

                    <div class="file-previews" id="filePreviews"></div>
                </div>

                <div class="input-area">
                    <div class="input-box" id="inputBox" contenteditable="true"></div>
                    <div class="placeholder_">输入消息...（支持粘贴文件，按Enter发送）</div>

                    <!-- 整合到输入框的按钮 -->
                    <div class="input-buttons">
                        <button class="input-button send-button" id="sendBtn" title="发送">
                            发送
                        </button>
                    </div>
                </div>
                <div class="enter-hint">按Enter发送，Shift+Enter换行</div>
            </div>
        </div>
    </div>
</div>

<!-- 引入 jquery, 注意, 这个引入操作要在使用之前! 否则会找不到相关函数的定义 -->
<script src="js/jquery.min.js"></script>

<script>
    // 全局状态
    const state = {
        files: []
    };

    // DOM元素
    const inputBox = document.getElementById('inputBox');
    const fileInput = document.getElementById('fileInput');
    const filePreviews = document.getElementById('filePreviews');
    const clearBtn = document.getElementById('clearBtn');
    const sendBtn = document.getElementById('sendBtn');
    const chatContainer = document.getElementById('chatContainer');

    // 文件预览功能
    const fileItems = document.querySelectorAll('.file-item');
    const fileModal = document.getElementById('fileModal');
    const fileModalTitle = document.getElementById('fileModalTitle');
    const fileModalBody = document.getElementById('fileModalBody');
    const fileModalClose = document.getElementById('fileModalClose');

    // 文件类型图标映射
    const fileIcons = {
        'pdf': '📄',
        'doc': '📄',
        'docx': '📄',
        'txt': '📄',
        'mp4': '🎬',
        'avi': '🎬',
        'mov': '🎬',
        'mp3': '🎵',
        'wav': '🎵',
        'zip': '📦',
        'rar': '📦',
        'xls': '📊',
        'xlsx': '📊',
        'ppt': '📊',
        'pptx': '📊'
    };

    // 初始化事件监听
    function init() {
        // 粘贴事件
        inputBox.addEventListener('paste', handlePaste);

        // 拖放事件
        inputBox.addEventListener('dragover', handleDragOver);
        inputBox.addEventListener('dragleave', handleDragLeave);
        inputBox.addEventListener('drop', handleDrop);

        // 文件选择
        fileInput.addEventListener('change', handleFileSelect);

        // 按钮事件
        sendBtn.addEventListener('click', sendMessage);

        // Enter键发送事件
        inputBox.addEventListener('keydown', handleKeyDown);
    }

    // 处理按键事件
    function handleKeyDown(e) {
        // 按Enter键发送消息
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendMessage();
        }
    }

    // 处理粘贴事件
    function handlePaste(e) {
        const items = e.clipboardData.items;

        for (let i = 0; i < items.length; i++) {
            const item = items[i];

            if (item.kind === 'file') {
                e.preventDefault();
                const file = item.getAsFile();
                addFile(file);
            }
        }
    }

    // 处理拖放事件
    function handleDragOver(e) {
        e.preventDefault();
        inputBox.classList.add('drag-over');
    }

    function handleDragLeave() {
        inputBox.classList.remove('drag-over');
    }

    function handleDrop(e) {
        e.preventDefault();
        inputBox.classList.remove('drag-over');

        if (e.dataTransfer.files.length > 0) {
            const files = Array.from(e.dataTransfer.files);
            files.forEach(file => addFile(file));
        }
    }

    // 处理文件选择
    function handleFileSelect(e) {
        const files = Array.from(e.target.files);
        files.forEach(file => addFile(file));
        // 重置input，允许选择相同文件
        e.target.value = '';
    }

    // 添加文件
    function addFile(file) {
        state.files.push(file);
        renderFilePreview(file);
    }

    // 渲染文件预览
    function renderFilePreview(file) {
        const previewItem = document.createElement('div');
        previewItem.className = 'file-preview-item';
        previewItem.setAttribute('data-file-name', file.name);

        // 获取文件扩展名
        const fileExt = file.name.split('.').pop().toLowerCase();
        const fileIcon = fileIcons[fileExt] || '📁';

        if (file.type.startsWith('image/')) {
            const img = document.createElement('img');
            img.src = URL.createObjectURL(file);
            previewItem.appendChild(img);
        } else {
            const icon = document.createElement('div');
            icon.className = 'file-icon';
            icon.textContent = fileIcon;
            previewItem.appendChild(icon);
        }

        const removeBtn = document.createElement('button');
        removeBtn.className = 'remove-btn';
        removeBtn.textContent = '×';
        removeBtn.setAttribute('title', '删除文件');
        removeBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            removeFile(file);
            previewItem.remove();
        });
        previewItem.appendChild(removeBtn);

        filePreviews.appendChild(previewItem);
    }

    // 移除文件
    function removeFile(file) {
        state.files = state.files.filter(f => f !== file);
    }

    // 获取输入内容
    function getInputContent() {
        return {
            text: inputBox.innerText,
            html: inputBox.innerHTML,
            files: [...state.files]
        };
    }


    document.getElementById('friend-list').addEventListener('click', function (event) {
        const target = event.target;

        // 判断点击的是同意按钮
        if (target.classList.contains('agree')) {
            const listItem = target.closest('.friend-request');
            const friendId = listItem.getAttribute('friend-id');

            agreeRequest(friendId);

            listItem.remove();

            getFriendList();

            friendSessionList();

            console.log('同意好友请求，ID:', friendId);

        }

        if (target.classList.contains('refuse')) {
            const listItem = target.closest('.friend-request');
            const friendId = listItem.getAttribute('friend-id');

            // 执行你的业务逻辑
            listItem.remove();
            console.log('拒绝好友请求，ID:', friendId);
        }
    });

    $(".tab .tab-session").click();

    // 清空输入
    function clearInput() {
        inputBox.innerHTML = '';
        state.files = [];
        filePreviews.innerHTML = '';
    }

    // 发送消息
    function sendMessage() {
        const content = getInputContent();

        console.log("输入 " + content.files)

        if (!content.text.trim() && content.files.length === 0) {
            return;
        }

        // 添加用户消息
        addMessage(content, true);

        // // 模拟机器人回复
        // setTimeout(() => {
        //     addMessage({
        //         text: '已收到您的消息' + (content.files.length > 0 ?
        //             `和${content.files.length}个文件` : ''),
        //         html: '',
        //         files: []
        //     }, false);
        // }, 1000);

        // 清空输入
        clearInput();
    }

    // 添加消息到聊天窗口
    function addMessage(content, isUser) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `message ${isUser ? 'user' : 'bot'}`;

        const contentDiv = document.createElement('div');
        contentDiv.className = 'message-content';

        if (content.files.length > 0) {
            const filesDiv = document.createElement('div');
            filesDiv.style.marginTop = '10px';
            filesDiv.style.display = 'flex';
            filesDiv.style.flexWrap = 'wrap';
            filesDiv.style.gap = '8px';

            content.files.forEach(file => {
                const fileDiv = document.createElement('div');
                fileDiv.style.padding = '5px 10px';
                fileDiv.style.background = 'rgba(0,0,0,0.05)';
                fileDiv.style.borderRadius = '12px';
                fileDiv.style.fontSize = '14px';

                // 获取文件扩展名
                const fileExt = file.name.split('.').pop().toLowerCase();
                const fileIcon = fileIcons[fileExt] || '📁';

                fileDiv.innerHTML = `${fileIcon} ${file.name}`;
                filesDiv.appendChild(fileDiv);
            });

            contentDiv.appendChild(filesDiv);
        }

        if (content.text) {
            const textDiv = document.createElement('div');
            textDiv.textContent = content.text;
            contentDiv.appendChild(textDiv);
        }

        messageDiv.appendChild(contentDiv);
        chatContainer.appendChild(messageDiv);

        // 滚动到底部
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }

    // 初始化
    document.addEventListener('DOMContentLoaded', init);



    // 文件上传和下载
    // 文件上传处理

    // 为每个文件项添加点击事件
    fileItems.forEach(item => {
        item.addEventListener('click', function() {
            const fileName = this.getAttribute('data-file');
            const fileType = this.getAttribute('data-type');

            showFilePreview(fileName, fileType);
        });
    });

    // 显示文件预览
    function showFilePreview(fileName, fileType) {
        fileModalTitle.textContent = fileName;
        fileModalBody.innerHTML = '';

        // 根据文件类型显示不同的预览内容
        if (fileType.startsWith('image/')) {
            // 图片预览
            const img = document.createElement('img');
            // 在实际应用中，这里应该是从服务器获取的真实图片URL
            // 这里使用一个占位图片来模拟
            img.src = `https://via.placeholder.com/800x600/07c160/ffffff?text=${encodeURIComponent(fileName)}`;
            img.alt = fileName;
            fileModalBody.appendChild(img);

            // 添加下载按钮
            addDownloadButton(fileName);
        }
        else if (fileType.startsWith('video/')) {
            // 视频预览
            const video = document.createElement('video');
            video.controls = true;
            video.autoplay = true;
            // 在实际应用中，这里应该是从服务器获取的真实视频URL
            // 这里使用一个占位视频来模拟
            video.innerHTML = '<source src="#" type="video/mp4">您的浏览器不支持视频播放';
            fileModalBody.appendChild(video);

            // 添加下载按钮
            addDownloadButton(fileName);
        }
        else if (fileType === 'application/pdf') {
            // PDF预览
            const pdfInfo = document.createElement('div');
            pdfInfo.className = 'file-info-content';
            pdfInfo.innerHTML = `
                    <h3>${fileName}</h3>
                    <p><strong>文件类型:</strong> PDF文档</p>
                    <p><strong>文件大小:</strong> 5.7 MB</p>
                    <p><strong>上传时间:</strong> 2025-09-23 17:01:33</p>
                    <p>PDF文件需要专门的阅读器打开。点击下方按钮下载文件。</p>
                `;
            fileModalBody.appendChild(pdfInfo);

            // 添加下载按钮
            addDownloadButton(fileName);
        }
        else {
            // 其他文件类型
            const fileInfo = document.createElement('div');
            fileInfo.className = 'file-info-content';

            // 获取文件扩展名
            const fileExt = fileName.split('.').pop().toLowerCase();
            const fileIcon = fileIcons[fileExt] || '📁';

            fileInfo.innerHTML = `
                    <div style="display: flex; align-items: center; margin-bottom: 15px;">
                        <div style="font-size: 48px; margin-right: 15px;">${fileIcon}</div>
                        <div>
                            <h3 style="margin-bottom: 5px;">${fileName}</h3>
                            <p><strong>类型:</strong> ${fileType || '未知'}</p>
                        </div>
                    </div>
                    <p>此文件类型无法直接预览。点击下方按钮下载文件。</p>
                `;
            fileModalBody.appendChild(fileInfo);

            // 添加下载按钮
            addDownloadButton(fileName);
        }

        // 显示模态框
        fileModal.classList.remove('hidden');
    }

    // 添加下载按钮
    function addDownloadButton(fileName) {
        const downloadBtn = document.createElement('button');
        downloadBtn.className = 'download-btn';
        downloadBtn.textContent = '下载原文件';
        downloadBtn.addEventListener('click', function() {
            downloadFile(fileName);
        });
        fileModalBody.appendChild(downloadBtn);
    }

    // 下载文件
    function downloadFile(fileName) {
        // 在实际应用中，这里应该调用后端API下载文件
        // 这里使用一个模拟的下载过程

        // 创建下载链接
        const link = document.createElement('a');

        // 根据文件类型设置不同的下载内容
        if (fileName.includes('.mp4')) {
            // 模拟视频文件下载
            link.href = '#';
            link.download = fileName;
        }
        else if (fileName.includes('.png') || fileName.includes('.jpg')) {
            // 模拟图片文件下载
            link.href = '#';
            link.download = fileName;
        }
        else if (fileName.includes('.pdf')) {
            // 模拟PDF文件下载
            link.href = '#';
            link.download = fileName;
        }
        else {
            // 其他文件类型
            link.href = '#';
            link.download = fileName;
        }

        // 触发下载
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

        // 显示下载成功消息
        alert(`文件 "${fileName}" 下载成功！`);
    }

    // 关闭模态框
    fileModalClose.addEventListener('click', function() {
        fileModal.classList.add('hidden');
    });

    // 点击模态框背景关闭
    fileModal.addEventListener('click', function(e) {
        if (e.target === fileModal) {
            fileModal.classList.add('hidden');
        }
    });

    // ESC键关闭模态框
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            fileModal.classList.add('hidden');
        }
    });
</script>

</body>
</html>